<script setup lang="ts">
import {ref} from "vue";
import EmptyData from "@/components/common/empty.vue";

defineOptions({
  name: 'TodoListD'
});
const pagination = ref<Api.Common.Pageable>({
    pageSize: 15,
    pageNumber: 1,
    searchProperty: null,
    searchValue: null,
    orderProperty: null,
    orderDirection: null,
    filters: null
  }
);
const page = ref<Api.Common.Page<any>>({
  content: [],
  total: 0,
  pageable: {
    pageSize: 15,
    pageNumber: 1,
    searchProperty: null,
    searchValue: null,
    orderProperty: null,
    orderDirection: null,
    filters: null
  }
});

</script>

<template>

  <div>
    <div class="empty-content" v-if="page?.content?.length === 0" >
      <EmptyData />
    </div>
    <div class="list-content" v-if="page?.content?.length > 0">
      <n-list hoverable clickable>
        <n-list-item>
          <template #prefix>
            <span style="text-align: right">张三</span>
          </template>
          <n-thing>
            11111111111111111111
          </n-thing>
          <template #suffix>
            <span style="text-align: right">2024-01-01</span>
          </template>
        </n-list-item>
      </n-list>
    </div>
    <div class="list-footer" v-if="page?.content?.length > 0">
      <n-pagination v-model:page="pagination.pageNumber" :page-count="page?.total" :page-slot="8" style="width: 160px"/>
    </div>
  </div>

</template>

<style scoped>
.list-content {
  height: 260px;
}
.empty-content{
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
